import React, { Component } from 'react';
import './main.css';

const TweenMax = window.TweenMax;
let animation;
class Ease extends Component {
  componentDidMount() {
    animation = TweenMax.fromTo('.green', 2, {x: 0}, {x: 200, ease: Bounce.easeOut});
    animation.pause();
  }

  playAnimation = () => {
    animation.play();
  }

  render() {
    return (
      <div>
        具体的详细配置，去看<a target="_bank" href="https://greensock.com/ease-visualizer">这里</a>
        <div style={{ marginTop: 20 }}>
          <div className="box green">
          </div>
          <div className="btns">
            <button className="btn" onClick={this.playAnimation}>play</button>
          </div>
        </div>
      </div>
    );
  }
}

export default Ease;